<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用函数</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style type="text/css">
        .inner{
            background-color: aqua;
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>

<div style="background-color: red;" id="outer">
    <div id="inner">
        <input type="text" id="username" name="username" >
        <div>
            <textarea id="area">123123</textarea>
        </div>
        <div>
            <select>
                <option value="eat">吃饭</option>
            </select>
        </div>
    </div>
</div>
<button type="button" onclick="get()">获取值</button>
<script type="text/javascript">
    function get() {
        // 当使用 val() 函数的时候，可以省略其中的参数，那么就表示获取
        let x = $(":input").val() ;   //对应DOM的value
        console.log( x ) ;
        // 获取 textarea 的 内容  //对应DOM的innerHTML属性
        x = $("#area").html() ;
        console.log( x ) ;
        // 获取 textarea 的 内容
        x = $("#area").text() ;   //对应DOM的innerText属性
        console.log( x ) ;
        //innerHTML包括里面嵌套的HTML而innerText仅包含Text文本
    }
</script>

</body>
</html>